import { Bubble } from "@ant-design/x";
import { Flex } from "antd";
import {UserOutlined} from '@ant-design/icons'

const fooAvatar: React.CSSProperties = {
  color: '#f56a00',
  backgroundColor: '#fde3cf',
};

const barAvatar: React.CSSProperties = {
  color: '#fff',
  backgroundColor: '#87d068',
};

const hideAvatar: React.CSSProperties = {
  visibility: 'hidden',
};
const Main = () => {
  return  <Flex gap="middle" vertical>
  {/**对方说话 */}
  <Bubble
    placement="start"
    content=""
    avatar={{ icon: <UserOutlined />, style: fooAvatar }}
  />
    {/**我方说话 */}
  <Bubble
    placement="end"
    content=""
    avatar={{ icon: <UserOutlined />, style: barAvatar }}
  />
</Flex>
};
export default Main;
